
// Use show/hide buttons
function initShowHideButtons() {
    // for each box
    $(".box").each(function(index, element) {
        // add buttonContainer
        var thisBox = $(this);
        var thisTitle = $(thisBox).find(".boxTitle");
        var thisDescription = $(thisBox).find(".boxDescription")
        if (thisDescription.size()) {
            $(thisTitle).append('<div class="infoButton" style="position:absolute; top:0; right:22px; cursor:pointer;"><img src="style/info.gif" /></div>');
            $(thisDescription).hide();
            $(thisDescription).css({visibility:'visible'});
            $(thisTitle).find('.infoButton').click(function() {
                if ($(thisDescription).is(':visible')) $(thisDescription).hide('fast');
                else $(thisDescription).show('fast');
            });
        }
        $(thisTitle).append('<div class="minMaxButton" style="position:absolute; top:0; right:5px; cursor:pointer;"></div>');
        var thisMinMaxButton = $(thisTitle).find(".minMaxButton");

        // icon definitions 
        var maxImage = '<img src="style/open.gif" />';
        var minImage = '<img src="style/close.gif" />';

        // show or hide by default and display icon
        var boxContent = $(element).find('.boxContent');
        if ($(boxContent).is('.hideByDefault')) {
            $(boxContent).hide();
            $(thisMinMaxButton).html(maxImage);
        }
        else {
            $(boxContent).show();
            $(thisMinMaxButton).html(minImage);
        }
        
        $(thisMinMaxButton).click(function() {
            if ($(boxContent).is(":visible")) {
                $(thisDescription).hide('fast');
                $(boxContent).hide('fast');
                $(thisMinMaxButton).html(maxImage);
            } else {
                $(boxContent).show('fast');
                $(thisMinMaxButton).html(minImage);
            }
        });
    });
}

